<template>
    <div class="all">
        <div class="header">
            <router-link to="beike">
                <van-icon name="arrow-left" class="fanhui" />
            </router-link>
            <h1>流水记录</h1>
        </div>
        <div class="nav">
            <div class="my_bei">
                <span>我的贝壳</span>
                <span>{{ $store.state.duan.num }}</span>
            </div>
        </div>
        <ul>
            <li>
                <span>时间</span>
                <span>钱数</span>
            </li>
            <li v-for="item in list">
                <span>{{ item.ctime }}</span>
                <span>{{ item.mlog }}</span>
                <span>￥{{ item.money }}</span>
            </li>
        </ul>

    </div>
</template>
<script>
import api from '@/api';
export default {
    data() {
        return {
            list: [],
        }
    },
    created() {
        this.cha();
    },
    methods: {
        async cha() {
            let id = this.$store.state.bian.data;
            // console.log(id);
            let res = await api.liu(id);
            this.list = res.data.data;
            console.log(this.list);
        },
    },
}
</script>
<style scoped>
.header {
    width: 100%;
    height: 10%;
    background-color: rgba(248, 248, 248, 100);
    /* position: relative; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
}

.fanhui {
    color: black;
    font-size: 23px;
    font-weight: bolder;
    left: 10px;
    top: 10px;
}

h1 {
    margin-top: 10px;
}

.all {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}


.nav {
    width: 100%;
    height: 10%;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;

}

.my_bei {
    width: 80%;
    height: 100%;
    background-color: #999;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.tu {
    width: 80%;
    height: 40%;
    margin-top: 40%;
    background-color: #999;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

ul {
    width: 100%;
    height: 80%;
    padding-top: 20px;
}

ul>li {
    width: 100%;
    height: 30px;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>